<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>烘焙馆-后台管理界面</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        html {
            overflow-y: hidden;
        }

        html, body, #app, .el-container, #aside-container-div {
            width: 100%;
            height: 100%;
        }

        html {
            overflow-x: hidden;
            overflow-y: scroll;
            scroll-behavior: smooth;
            background: #f2f5f7;
        }

        body {
            margin: 0;
            padding: 0;
        }

        [v-clock]{
            display: none;
        }

        .hoverable {
            transition-duration: .1s;
        }

        .hoverable:hover {
            transform: scale(1.1);
            transition-duration: .2s;
        }

        .hoverable:active {
            transform: scale(.8);
            transition-duration: .05s;
        }

        .el-card {
            border-radius: 15px;
        }

        .el-main {
            padding: 0;
            display: block;
        }

        .el-textarea__inner {
            font-family: 'Microsoft YaHei UI', serif;
            resize: none;
        }

        .el-submenu__title i {
            color: white;
            font-size: 15px;
        }

        .el-menu-item i {
            color: white;
        }

        .el-divider__text{
            font-size: 25px;
        }
    </style>
</head>

<body>
<div id="app" v-clock>
    <el-container>
        <el-header height="90px" style="padding: 0">
            <el-card style="height:100%;background-color:#386582">
                <h1 style="font-size: 40px;margin: 0;color: white">烘焙馆后台管理系统
                    <span style="float:right;font-size: 25px;position:relative;top:20px">欢迎xxx回来!
                        <a href="javascript:void(0)" style="color: orange">退出登录</a></span>
                </h1>
            </el-card>
        </el-header>
        <el-container>
            <el-aside width="330px" style="overflow:hidden">
                <el-card style="height:100%;background-color:#386582">
                    <div id="aside-container-div" style="height:100%">
                        <div style="margin: 15px">
                            <img src="../imgs/icon/icon01.png" alt="" width="228px">
                        </div>
                        <el-menu
                                :default-active="sideNavActive"
                                @select="sideNavHandleSelect"
                                class="el-menu-vertical-demo"
                                background-color="#386582"
                                text-color="#fff"
                                active-text-color="orange"
                                unique-opened
                                style="margin: 15px;border: none">
                            <el-menu-item index="1">
                                <template slot="title">
                                    <i class="el-icon-user"></i>
                                    <span>用户管理</span>
                                </template>
                            </el-menu-item>

                            <el-submenu index="2">
                                <template slot="title">
                                    <i class="el-icon-files"></i>
                                    <span>内容管理</span>
                                </template>

                                <el-submenu index="2-1">
                                    <template slot="title">宣传内容管理</template>
                                    <el-menu-item index="2-1-1">
                                        <i class="el-icon-picture-outline-round"></i>
                                        <span>首页顶部轮播图</span>
                                    </el-menu-item>
                                </el-submenu>

                                <el-submenu index="2-2">
                                    <template slot="title">核心内容管理</template>
                                    <el-menu-item index="2-2-1">
                                        <i class="el-icon-s-order"></i>
                                        <span>烘焙食谱</span>
                                    </el-menu-item>
                                    <el-menu-item index="2-2-2">
                                        <i class="el-icon-video-camera"></i>
                                        <span>烘焙视频</span>
                                    </el-menu-item>
                                    <el-menu-item index="2-2-3">
                                        <i class="el-icon-chat-line-square"></i>
                                        <span>行业资讯</span>
                                    </el-menu-item>
                                    <el-submenu index="2-2-4">
                                        <template slot="title">
                                            <i class="el-icon-s-claim"></i>
                                            <span>招聘信息</span>
                                        </template>
                                        <el-menu-item index="2-2-4-1">
                                            <i class="el-icon-suitcase"></i>
                                            <span>工作条目</span>
                                        </el-menu-item>
                                        <el-menu-item index="2-2-4-2">
                                            <i class="el-icon-s-custom"></i>
                                            <span>人才条目</span>
                                        </el-menu-item>
                                        <el-menu-item index="2-2-4-3">
                                            <i class="el-icon-office-building"></i>
                                            <span>公司条目</span>
                                        </el-menu-item>
                                    </el-submenu>
                                </el-submenu>
                            </el-submenu>
                        </el-menu>
                    </div>
                </el-card>
            </el-aside>
            <el-main>
                <el-card>
                    <div v-for="table in tableArr"
                         v-if="sideNavActive===table.activeIndex"
                         style="width: 100%;height: 100%;padding: 15px">
                        <el-divider content-position="left">{{table.tableTitle}}</el-divider>
                        <!--表格展示内容部分开始-->
                        <el-table :data="table.tableData" style="width: 100%">
                            <!--图片预览-->
                            <el-table-column v-if="table.hasImg" label="图片预览" align="center">
                                <template slot-scope="scope">
                                    <img :src="scope.row.url" alt="未找到图片" class="hoverable" height="150px">
                                </template>
                            </el-table-column>
                            <!--表格主要内容开始-->
                            <template v-for="(value,key) in table.tableLabel">
                                <el-table-column :prop="key" :label="value" align="center"></el-table-column>
                            </template>

                            <!--编辑和删除操作开始-->
                            <el-table-column label="操作" width="fit-content" align="center">
                                <template slot-scope="scope">
                                    <!--编辑条目开始-->
                                    <el-button size="mini" @click="dataToEdit(scope.$index, table)">编辑</el-button>
                                    <el-dialog title="编辑条目" width="30%"
                                               :visible.sync="table.editVisible">
                                        <!--编辑内容区域开始-->
                                        <el-row gutter="20" style="margin: 0 0 40px ">
                                            <el-col span="6">
                                                <el-select v-model="table.editChoose" placeholder="请选择">
                                                    <el-option v-for="(label,prop,i) in table.tableLabel"
                                                               :key="i" :label="label" :value="prop"></el-option>
                                                </el-select>
                                            </el-col>
                                            <el-col span="18">
                                                <el-input placeholder="请输入修改后的值"
                                                          v-model="table.editInput"></el-input>
                                            </el-col>
                                        </el-row>
                                        <!--编辑内容区域结束-->

                                        <!--取消或确认按钮区域开始-->
                                        <el-row type="flex" justify="center">
                                            <el-col span="5">
                                                <el-button type="danger"
                                                           v-on:click="dataCancelEdit(table)">
                                                    取消修改
                                                </el-button>
                                            </el-col>
                                            <el-col span="5">
                                                <el-button type="primary"
                                                           v-on:click="dataEdit(table)">
                                                    确认修改
                                                </el-button>
                                            </el-col>
                                        </el-row>
                                        <!--取消或确认按钮区域结束-->
                                    </el-dialog>
                                    <!--对话框结束-->
                                    <!--编辑条目结束-->

                                    <!--删除条目开始-->
                                    <el-button size="mini" type="danger"
                                               @click="dataDel(scope.row, table)">删除
                                    </el-button>
                                    <!--删除条目结束-->
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--表格展示内容部分结束-->

                        <!--添加新项开始-->
                        <p class="hoverable" v-on:click="table.addVisible = true"
                           style="text-align: center">
                            <i class="el-icon-circle-plus-outline"></i>
                        </p>
                        <el-dialog
                                title="添加条目"
                                :visible.sync="table.addVisible"
                                width="30%">
                            <el-form ref="form" :model="table.addNew" label-width="120px">
                                <el-form-item
                                        v-for="(value,key) in table.tableLabel"
                                        :label="value">
                                    <el-input v-model="table.addNew[key]"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-row type="flex" justify="center">
                                        <el-col span="5">
                                            <el-button type="danger"
                                                       v-on:click="dataCancelAdd(table)">
                                                取消添加
                                            </el-button>
                                        </el-col>
                                        <el-col span="5">
                                            <el-button type="primary"
                                                       v-on:click="dataAdd(table)">
                                                确认添加
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                        <!--添加新项结束-->
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>

<script>
    function randInt(start, end) {
        if (end < start)
            throw Error
        let raw_rand = Math.random()
        let span = end - start
        return Math.round(start + raw_rand * span)
    }

    class Table {
        constructor(tableData, tableLabel, tableTitle, activeIndex, hasImg = false) {
            this.tableData = tableData
            this.tableLabel = tableLabel
            this.tableTitle = tableTitle
            this.activeIndex = activeIndex
            this.hasImg = hasImg

            this.editVisible = false
            this.editRowIndex = null
            this.editChoose = null
            this.editInput = ''

            this.addVisible = false
            this.addNew = {}
        }
    }

    /*数据*/
    // 1 用户
    let userTableData = [
        {
            UID: 'AA00001',
            username: 'Rainbow6Frost@66.com',
            password: 'R666666',
            nickname: 'Jeff',
            loginCnt: '39',
            lastOnlineTime: '2023-01-01 19:35:21',
            lastOnlineIp: '192.168.0.195',
            isOnline: '在线'
        }, {
            UID: 'AA00002',
            username: 'CSGOAkkk@go.com',
            password: 'Cs4747447',
            nickname: 'Heng',
            loginCnt: '83',
            lastOnlineTime: '2022-12-01 12:21:45',
            lastOnlineIp: '192.118.12.193',
            isOnline: '在线'
        }, {
            UID: 'AA00003',
            username: 'PaiPaiG7man@apex.com',
            password: 'ApexG7',
            nickname: 'Carl',
            loginCnt: '34',
            lastOnlineTime: '2023-01-12 02:22:22',
            lastOnlineIp: '192.128.2.125',
            isOnline: '在线'
        }, {
            UID: 'AA00004',
            username: 'Wa@wa.com',
            password: 'WllTtTtt',
            nickname: 'Piggy',
            loginCnt: '41',
            lastOnlineTime: '2023-01-14 22:15:55',
            lastOnlineIp: '192.161.6.235',
            isOnline: '在线'
        },
    ]
    let userTableLabel = {
        UID: 'UID',
        username: '用户名',
        password: '密码',
        nickname: '昵称',
    }
    let userTable = new Table(userTableData, userTableLabel, '用户管理后台', '1')


    // 2-1-1 首页轮播图
    let syCaroTableData = [
        {url: '../imgs/hd/首页header轮播图01.png'},
        {url: '../imgs/hd/首页header轮播图02.png'},
        {url: '../imgs/hd/首页header轮播图03.png'}]
    let syCaroTableLabel = {url: '图片地址'}
    let syCaroTable = new Table(syCaroTableData, syCaroTableLabel, '首页轮播图管理后台', '2-1-1', true)

    // 2-2-1 食谱
    let rcpTableData = [
        {
            url: '../imgs/mn/recipe/01.jpg', title: '入口即酥的超浓花生酱酥饼',
            author: '烘焙馆', type: '饼干',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/02.jpg', title: '枣泥花式面包，好吃到爆',
            author: '烘焙馆', type: '面包',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/03.jpg', title: '中种淡奶油吐司,送朋友超有面子',
            author: '烘焙馆', type: '面包',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/04.png', title: '开放式三明治,一份小清新快手早餐',
            author: '烘焙馆', type: '面包',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/05.jpg', title: '心形火龙果椰蓉面包,任谁都抗拒不了',
            author: '烘焙馆', type: '面包',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/06.jpg', title: '酥脆培根吐司芝士卷，人见人爱',
            author: '烘焙馆', type: '面包',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/07.jpg', title: '红酒芝士面包,小小的梭子红酒芝士',
            author: '烘焙馆', type: '面包',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/08.jpg', title: '爆浆抹茶甜甜圈面包，自带幸福感的小甜甜',
            author: '烘焙馆', type: '面包',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/09.jpg', title: '核桃葡萄干软欧：蔓越莓种面',
            author: '烘焙馆', type: '面包',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/10.jpg', title: '芒果酸奶条，绝对值得一试！',
            author: '烘焙馆', type: '小食',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/11.jpg', title: '爱乐甜零卡糖版网红烤牛奶，香甜软嫩Q弹',
            author: '烘焙馆', type: '小食',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/12.jpg', title: '蔓越莓绿豆糕，味道还不错值得一试!',
            author: '烘焙馆', type: '小食',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/13.png', title: '巧克力纸杯蛋糕，百分百成功超好吃',
            author: '烘焙馆', type: '小食',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/recipe/14.png', title: '今日甜品·Q弹浓郁的网红烤奶块',
            author: '烘焙馆', type: '小食',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        }]
    let rcpTableLabel = {
        title: '标题',
        author: '作者',
        type: '类型',
        date: '发布日期',
        view: '浏览量',
    }
    let rcpTable = new Table(rcpTableData, rcpTableLabel, '食谱管理后台', '2-2-1', true)

    // 2-2-2 视频
    let mvTableData = [
        {
            url: '../imgs/mn/mv/1.png',
            title: '这样做彩虹果冻太惊艳了！在废弃的饼干盒里就能做，好...',
            author: '烘焙馆', type: '美食欣赏',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/2.png',
            title: '入门级烘焙小零食，玛格丽特饼干，制作简单容易存放',
            author: '烘焙馆', type: '烘焙教学',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/3.png',
            title: '不用面粉不用烤箱，也能做出像模像样的披萨，拥有芝士...',
            author: '烘焙馆', type: '烘焙教学',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/4.png',
            title: '会做马卡龙的烘焙师才是好甜品师',
            author: '烘焙馆', type: '美食欣赏',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/5.png',
            title: '想吃五彩琥珀糖不用买，教你在家就能做！',
            author: '烘焙馆', type: '美食欣赏',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/6.png',
            title: '差点以为它是漂亮的芭比娃娃，原来是牛人做的翻糖蛋糕',
            author: '烘焙馆', type: '美食欣赏',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/7.png',
            title: '电饭锅烘焙之速溶锅芝士蛋糕',
            author: '烘焙馆', type: '烘焙教学',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/8.png',
            title: '今天教你一款豆沙吐司，做法简单！',
            author: '烘焙馆', type: '烘焙教学',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/9.png',
            title: '松软又Q弹的糯米小蛋糕升级啦，加了芝士和肉松口感更丰富',
            author: '烘焙馆', type: '烘焙教学',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/10.png',
            title: '这才是真正的天才烘焙师不服不行',
            author: '烘焙馆', type: '美食欣赏',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/11.png',
            title: '日本芝士蛋糕美味的烘焙配方工艺教程',
            author: '烘焙馆', type: '烘焙教学',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/12.png',
            title: '手工鮮奶吐司面包，最好吃的做法，松软可口，一学就会！',
            author: '烘焙馆', type: '美食欣赏',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/13.jpg',
            title: '家庭烘焙和专业烘焙区别在哪里',
            author: '烘焙馆', type: '烘焙教学',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/14.jpg',
            title: '蛋糕面糊温度计算公式（面糊类）',
            author: '烘焙馆', type: '烘焙教学',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/15.png',
            title: '找烘焙包装就到2022PKWE8月3日-5日在义乌国际博览中心等您！',
            author: '烘焙馆', type: '相关看点',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/mv/16.png',
            title: '2022烘焙糕点及包装趋势看2022上海包装展',
            author: '烘焙馆', type: '相关看点',
            date: '2020-7-17 ' + randInt(10, 24) + ':' + randInt(10, 59) + '',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        }]
    let mvTableLabel = {
        url: '图片地址',
        title: '标题',
        author: '作者',
        type: '种类',
        date: '发布日期',
        view: '浏览量',
    }
    let mvTable = new Table(mvTableData, mvTableLabel, '视频管理后台', '2-2-2', true)

    // 2-2-3 资讯
    let infoTableData = [
        {
            url: '../imgs/mn/info/01.jpg',
            title: '成都一蛋糕店遭恶意退单，一查竟是同行干的！对方回应：攻击错对象',
            detail: '“订单下了之后，估摸着蛋糕快做完时就点退款，这种情况持续了一周。”在刚刚过去的一周，王先生位于成都市武侯区晋阳路的蛋糕店遇到了一件蹊跷的事儿，外卖平台上的订单在下单后不断被退单，共遇到四五十单，导',
            author: '烘焙馆',
            date: '2020-7-21 14:07',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/info/02.jpg',
            title: '烘焙行业越来越难做了？并不是！',
            detail: '总有人抱怨说烘焙行业越来越难做了，其实主要还是经营策略和方法问题。我们拿生日蛋糕举例，尤其是水果蛋糕，有个十分大的难题，就是说制作次数太低。大部分人一年只过一次生日，每一家中历年消費不上几回。但针',
            author: '烘焙馆',
            date: '2020-7-21 14:02',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/info/03.png',
            title: '济南一知名品牌面包连锁店，多家门店关门，很多人充值卡还没消费',
            detail: '近期，进驻济南多年的面包新语品牌连锁店已悄然关门，一时间让不少充值该店储值卡的消费者找不到消费门店，甚至面临退卡无门的窘境。18日，记者联系到面包新语品牌官方一工作人员。她表示，目前仅是暂时关掉多',
            author: '烘焙馆',
            date: '2020-7-21 13:53',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        },
        {
            url: '../imgs/mn/info/04.jpg',
            title: '85度C又出事了，饮品里喝出“订书针”，店员的一波操作让女子直接曝',
            detail: '据海峡消费报报道，福州一3岁小孩在85度C奶茶里喝出订书钉，卖家否认来源。近日，福州的郑女士在85度C门店里购买了一款名叫爆粒葡萄的饮品进行外带。在食用过程中，3岁的儿子从葡萄粒中吃出了一颗订书钉。幸运',
            author: '烘焙馆',
            date: '2020-7-17 17:23',
            view: randInt(1000, 5000),
            reply: randInt(10, 100)
        }]
    let infoTableLabel = {
        title: '标题',
        author: '作者',
        date: '发布日期',
        view: '浏览量',
    }
    let infoTable = new Table(infoTableData, infoTableLabel, '资讯管理后台', '2-2-3', true)

    // 2-2-4-1 招聘-工作
    let rctJbTableData = [
        {
            name: '招聘烘焙师',
            salary: '5000-7000元',
            comp: '郑州丰客餐饮管理有限公司',
            limit: '学历 不限 | 3年-5年',
            provide: '包住 | 包吃 | 节日福利 | 社保',
            loc: '河南省-郑州市-二七区马寨学院路28'
        },
        {
            name: '高级烘焙师',
            salary: '10000元以上',
            comp: '浙江五芳斋实业股份有限公司',
            limit: '高中/中专 | 5年-8年',
            provide: '包住 | 餐补 | 年终奖 | 住房公积金',
            loc: '浙江省-嘉兴市-秀洲区-浙江省嘉兴市'
        },
        {
            name: '招聘烘焙师',
            salary: '5000-7000元',
            comp: '江南糕点',
            limit: '学历 不限 | 3年-5年',
            provide: '年假 | 住房公积金 | 婚假 | 节日福利',
            loc: '山东省-济南市-济南天桥区师范路88'
        },
        {
            name: '烘焙师',
            salary: '5000-7000元',
            comp: '江南糕点',
            limit: '学历 不限 | 1年-3年',
            provide: '加班补助 | 住房公积金 | 婚假 | 餐补',
            loc: '山东省-济南市-济南天桥区师范路88'
        },
        {
            name: '招聘烘焙全能师',
            salary: '5000-7000元',
            comp: '麦浪烘焙',
            limit: '学历 不限 | 经验 不限',
            provide: '包吃 | 包住',
            loc: '江苏省-扬州市-广陵区-李典镇花园'
        },
        {
            name: '烘焙师，裱花师',
            salary: '面议',
            comp: '女王伯爵烘焙',
            limit: '学历 不限 | 经验 不限',
            provide: '年假 | 年终奖 | 包吃 | 包住',
            loc: '北京市-延庆区-新城街'
        },
        {
            name: '招聘烘焙全能师',
            salary: '5000-7000元',
            comp: '品华居法式烘焙',
            limit: '高中/中专 | 5年-8年',
            provide: '包吃 | 包住',
            loc: '江西省-南昌市-红谷滩新区-九龙湖'
        },
        {
            name: '招聘烘焙全能师',
            salary: '5000-7000元',
            comp: '欧风麦甜',
            limit: '学历 不限 | 经验 不限',
            provide: '包吃 | 包住 | 年假',
            loc: '广东省-佛山市-佛山市里水大道南'
        },
        {
            name: '招聘裱花师',
            salary: '面议',
            comp: '三山慕巴夫烘焙店',
            limit: '学历 不限 | 3年-5年',
            provide: '面议',
            loc: '安徽省-芜湖市-三山区-竹园路'
        },
        {
            name: '招聘裱花师',
            salary: '5000-7000元',
            comp: '美乐滋',
            limit: '学历 不限 | 经验 不限',
            provide: '包吃 | 包住',
            loc: '江西省-抚州市-南丰县-江西省抚州南'
        },
        {
            name: '招聘烘焙师',
            salary: '5000-7000元',
            comp: '阳光麦田',
            limit: '学历 不限 | 5年-8年',
            provide: '交通补贴 | 包吃 | 包住 | 年假',
            loc: '江苏省-扬州市-广陵区-扬州市沙头镇'
        },
        {
            name: '招聘烘焙中工',
            salary: '3000-4000元',
            comp: '品华居法式烘焙',
            limit: '高中/中专 | 1年-3年',
            provide: '包吃 | 包住',
            loc: '江西省-南昌市-红谷滩新区-九龙湖'
        }]
    let rctJbTableLabel = {
        name: '岗位',
        salary: '薪资',
        comp: '公司名',
        limit: '要求',
        provide: '提供',
        loc: '地址'
    }
    let rctJbTable = new Table(rctJbTableData, rctJbTableLabel, '招聘-工作管理后台', '2-2-4-1')

    // 2-2-4-2 招聘-人才
    let rctExpTableData = [
        {
            url: '../imgs/mn/recruit/man/01.jpg',
            name: '赵雪彦',
            title: '12000-20000',
            info1: '8年以上',
            info2: '技术总监',
            view: randInt(100, 50000)
        },
        {
            url: '../imgs/mn/recruit/man/02.jpg',
            name: '周小小',
            title: '8000-10000',
            info1: '5年-8年',
            info2: '面包主管,烘焙主管',
            view: randInt(100, 50000)
        },
        {
            url: '../imgs/mn/recruit/man/03.jpg',
            name: '肖三元',
            title: '8000-10000',
            info1: '8年以上',
            info2: '烘焙全能师',
            view: randInt(100, 50000)
        },
        {
            url: '../imgs/mn/recruit/man/04.jpg',
            name: '程小方',
            title: '5000-8000',
            info1: '5年-8年',
            info2: '烘焙师,面包师',
            view: randInt(100, 50000)
        },
        {
            url: '../imgs/mn/recruit/man/05.jpg',
            name: '姚德强',
            title: '4000-5000',
            info1: '5年-8年',
            info2: '裱花师',
            view: randInt(100, 50000)
        }]
    let rctExpTableLabel = {
        url: '图片地址',
        name: '姓名',
        title: '预期薪资',
        info1: '工龄',
        info2: '预期岗位',
        view: '浏览量'
    }
    let rctExpTable = new Table(rctExpTableData, rctExpTableLabel, '招聘-人才管理后台', '2-2-4-2', true)

    // 2-2-4-3 招聘-公司
    let rctCmpTableData = [
        {
            url: '../imgs/mn/recruit/comp/01.png',
            name: '郑州丰客餐饮管理有限公司',
            title: randInt(1, 5),
            info1: '河南省-郑州市',
            info2: '公司',
            view: randInt(100, 50000)
        },
        {
            url: '../imgs/mn/recruit/comp/02.png',
            name: '浙江五芳斋实业股份有限公司',
            title: randInt(1, 5),
            info1: '浙江省-嘉兴市',
            info2: '公司',
            view: randInt(100, 50000)
        },
        {
            url: '../imgs/mn/recruit/comp/03.png',
            name: '靖江市法麦美辰面包店',
            title: randInt(1, 5),
            info1: '江苏省-泰州市',
            info2: '门店',
            view: randInt(100, 50000)
        },
        {
            url: '../imgs/mn/recruit/comp/04.jpg',
            name: '余干鲜之语食品有限公司',
            title: randInt(1, 5),
            info1: '江西省-上饶市',
            info2: '公司',
            view: randInt(100, 50000)
        },
        {
            url: '../imgs/mn/recruit/comp/05.jpg',
            name: '武汉糖涩餐饮管理有限公司',
            title: randInt(1, 5),
            info1: '湖北省-武汉市',
            info2: '门店',
            view: randInt(100, 50000)
        }]
    let rctCmpTableLabel = {
        url: '图片地址',
        name: '姓名',
        title: '剩余岗位数',
        info1: '地址',
        info2: '工作形式',
        view: '浏览量'
    }
    let rctCmpTable = new Table(rctCmpTableData, rctCmpTableLabel, '招聘-公司管理后台', '2-2-4-3')


    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                sideNavActive: '1',
                tableArr: [userTable, syCaroTable, rcpTable, mvTable, infoTable, rctJbTable, rctExpTable, rctCmpTable]
            }
        },
        methods: {
            sideNavHandleSelect(key, keyPath) {
                v.sideNavActive = key
                console.log(v.sideNavActive, keyPath)
            },

            /*编辑条目开始*/
            dataClearEdit(table) {
                table.editRowIndex = null
                table.editChoose = null
                table.editInput = ''
            },
            dataToEdit(rowIndex, table) {
                console.log(rowIndex)
                table.editRowIndex = rowIndex
                table.editVisible = true
            },
            dataCancelEdit(table) {
                table.editVisible = false
                v.dataClearEdit(table)
                console.log(table.editChoose)
            },
            dataEdit(table) {
                console.log(table.editChoose, table.editInput)
                table.tableData[table.editRowIndex][table.editChoose] = table.editInput

                table.editVisible = false
                v.dataClearEdit(table)
            },
            /*编辑条目结束*/

            /*删除条目开始*/
            dataDel(row, table) {
                let i = table.tableData.indexOf(row)
                console.log(i)
                table.tableData.splice(i, 1)
            },
            /*删除条目结束*/

            /*增加条目开始*/
            dataClearAdd(table) {
                table.addNew = {}
            },
            dataCancelAdd(table) {
                table.addVisible = false
                v.dataClearAdd(table)
            },
            dataAdd(table) {
                let addNew = Object.assign({}, table.addNew)
                table.tableData.push(addNew)

                table.addVisible = false
                v.dataClearAdd(table)
            },
            /*增加条目结束*/

        }
    })
</script>
</html>